<template>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:200px" @click="getClickInfo" :scroll-wheel-zoom='true'>
        <bm-label content="湖南省长沙市天心区暮云工业园" :position="{lng: 112.997554, lat: 28.036461}" :labelStyle="{color: '#000', fontSize : '12px', padding: '10px 5px', border: '0px'}" title="Hover me"/>
    </baidu-map>
</template>
<script>
export default {
  name: 'TestBaiDu',
  data () {
    return {
      center: { lng: 112.997554, lat: 28.036461 },
      zoom: 13
    }
  },
  methods: {
    handler ({ BMap, map }) {
      var point = new BMap.Point(112.997554, 28.036461)
      map.centerAndZoom(point, 13)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
      map.addOverlay(circle)
    },
    getClickInfo (e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    }
  }
}
</script>

<style scoped>
    .serachinput {
        width: 200px;
        box-sizing: border-box;
        border-radius: 20px 20px;
        padding: 9px;
        border: 1px solid #dddee1;
        line-height: 20px;
        font-size: 16px;
        height: 38px;
        color: #333;
        position: relative;
        border-radius: 4px;
        -webkit-box-shadow: #666 0px 0px 10px;
        -moz-box-shadow: #666 0px 0px 10px;
        box-shadow: #666 0px 0px 10px;
    }
    .serachinput{
        width: 400px;
        height: 50px;
    }
/deep/.anchorBL img{
 padding-bottom: 6px;
 display: none;
}
</style>
